﻿$(document).ready(function () {
    $('div.member').on('mouseenter mouseleave', function (event) {
        //$img = $(this).find('img');
        //if (!$img.is(':animated') || event.type == 'mouseleave') {
        
            var size = event.type == 'mouseenter' ? 85 : 75;
            var padding = event.type == 'mouseleave' ? 5 : 0;
            $(this).find('img').stop().animate({
                width: size,
                height: size,
                paddingTop: padding,
                paddingLeft: padding
            });
        //}
    })

    $('#fx-toggle').show().on('click', function () {
        $.fx.off = !$.fx.off;
    })

    function showDetails() {
        $member = $(this);
        if ($member.hasClass('active')) return;
        $movable.fadeOut();
        $('div.member.active').removeClass('active').children('div').fadeOut();
        $(this).addClass('active');

        $(this).find('div').css({ display: 'block', left: '-300px', top: 0 }).each(function (index) {
            $(this).animate({ left: 0, top: index * 25 }, { duratioin: 'slow', specialEasing: { top: 'easeInQuart' } });
        }).promise().done(showBio);
    }

    var $movable = $('<div id="movable"></div>').appendTo('body');
    var $bioBasicStyles = { display: 'none', width: '25px', height: '5px' }, $bioEffects = { duration: 800, easing: 'easeOutQuart', specialEasing: { opacity: 'linear' } };
    function showBio() {
        var $member = $(this).parent(), $bio = $member.find('p.bio'),
            startStyles = $.extend($bioBasicStyles, $member.offset()), endStyles = { width: $bio.width(), left: $member.width() + $member.offset().left - 5, top: $member.offset().top + 5, opacity: 'show' };
        $movable.html($bio.clone()).css(startStyles).animate(endStyles, $bioEffects).animate({ height: $bio.height() }, { easing: 'easeOutQuart' });

    }

    $('div.member').click(showDetails);
});

/*  课后练习

    (1) 定义一个新的动画速度常量zippy，并将它应用到简历的显示效果中。 
    (2) 修改成员信息水平移动的动画效果，让相关对象“弹跳”着出来。 
    (3) 再给承诺（promise）对象添加一个延迟回调函数，为当前成员的位置<div>添加一个highlight类。 
    (4) 挑战：在简介动画运行前添加两秒钟的时间延迟。使用jQuery 的.delay()方法。 
    (5) 挑战：在单击当前活动照片时，折叠个人信息。在此之前，先停止正在运行的所有动画。

*/